/*
 *                        .::::.
 *                      .::::::::.
 *                     :::::::::::
 *                  ..:::::::::::'
 *               '::::::::::::'
 *                 .::::::::::
 *            '::::::::::::::..
 *                 ..::::::::::::.
 *               ``::::::::::::::::
 *                ::::``:::::::::'        .:::.
 *               ::::'   ':::::'       .::::::::.
 *             .::::'      ::::     .:::::::'::::.
 *            .:::'       :::::  .:::::::::' ':::::.
 *           .::'        :::::.:::::::::'      ':::::.
 *          .::'         ::::::::::::::'         ``::::.
 *      ...:::           ::::::::::::'              ``::.
 *     ````':.          ':::::::::'                  ::::..
 *                        '.:::::'                    ':'````..
 *
 * @Author: byx
 * @Date: 2022-11-26 16:08:55
 * @LastEditors: byx
 * @LastEditTime: 2022-11-30 09:45:35
 * @version: 1.0
 * @Descripttion: wwww.byx1024.top
 */
import React, { Component } from 'react'
import { Card, Form, Input, Checkbox, Button, message } from 'antd'

import styles from './index.module.scss'
import logo from 'assets/logo.png'
import { login } from 'api/login'
import { setToken } from 'utils/storage'
export default class Login extends Component {
  render() {
    return (
      <div className={styles.login}>
        <Card className="login-container">
          <img className="login-logo" src={logo} alt="null" />
          {/* 登录表单 */}
          <Form
            size="large"
            validateTrigger={['onBlur', 'onChange']}
            onFinish={this.onFinishFn}
            initialValues={{
              mobile: '13911111111',
              code: '246810',
              agree: true,
            }}
          >
            <Form.Item
              name="mobile"
              rules={[
                {
                  pattern: /^1[3-9]\d{9}$/,
                  message: '手机号码格式不对',
                  validateTrigger: 'onBlur',
                },
                { required: true, message: '请输入手机号' },
              ]}
            >
              <Input placeholder="请输入手机号" autoComplete="off" />
            </Form.Item>

            <Form.Item
              name="code"
              rules={[
                { len: 6, message: '验证码6个字符', validateTrigger: 'onBlur' },
                { required: true, message: '请输入验证码' },
              ]}
            >
              <Input placeholder="请输入验证码" autoComplete="off" />
            </Form.Item>

            <Form.Item
              valuePropName="checked"
              name="agree"
              rules={[
                {
                  validator: (_, value) =>
                    value ? Promise.resolve() : Promise.reject(new Error('请阅读并同意用户协议')),
                },
              ]}
            >
              <Checkbox>我已阅读并同意「隐私条款」和「用户协议」</Checkbox>
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" block>
                登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    )
  }

  onFinishFn = async ({ mobile, code }) => {
    try {
      const res = await login(mobile, code)
      // 登录成功后，存储token
      // localStorage.setItem('itcast_geek_pc', res.data.token)
      console.log(res)
      setToken(res.data.token)
      // 判断 是否有 state 属性
      const { state } = this.props.location
      console.log(state)
      if (state) {
        this.props.history.push(state.from)
      } else {
        // 通过路由跳转到首页
        this.props.history.push('/home')
      }

      message.success('登录成功', 1)
    } catch (error) {
      console.log(error)
      message.error(error.response.data.message, 1)
    }
  }
}
